<!--  -->
<template>
  <div>
    <el-dialog title="正在获取文件，请等待" :visible.sync="progressShow" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="20%">
    <div style="text-align: center;">
        <el-progress :percentage="percentage" type="circle"></el-progress>
    </div>
</el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'onlinereadProgress',
  components: {},
  props:{
    filename:String,
    bookname:String,
   
  },
  data () {
  return {
     percentage:0, //进度条的占比
      progressShow: false, // 是否显示进度条弹出层
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted(){
    
  },
  methods: {
         onlinereadProgress(id,filename,bookname) 
      {
          //进度条恢复为 0 
          this.percentage= 0;
          //发起请求
          axios({
              url:window.SITE_CONFIG.baseUrl+ "/searchbook/preview?id="+id+"&filename="+filename+"&书名="+bookname,
              method:"get",
              responseType:"blob",
             
              //xml返回数据的钩子函数，可以用来获取数据的进度 具体可查看axios的官网
              onDownloadProgress:(progressEvent)=>{
                    this.progressShow=true
                  //progressEvent.loaded 下载文件的当前大小
                  //progressEvent.total  下载文件的总大小 如果后端没有返回 请让他加上！
                  let progressBar = Math.round( progressEvent.loaded / progressEvent.total*100);
                  //接收进度为99%的时候需要留一点前端编译的时间
                  if(progressBar >= 99){
                      this.percentage = 99;
                    //  this.$message.success("下载完成，文件正在编译。");
                      // this.title = '下载完成，文件正在编译。';
                  }else{
                      this.percentage = progressBar;
                      //this.$message("正在下载，请稍等。");
                      // this.title = '正在下载，请稍等。';
                  }
                  // console.log(progressEvent)
              }
          }).then(res => {
               console.log("555",res)
              if(res.status != 200){
                  this.$message.error("文件下载失败，请稍后重试！");
                  return false;
              }
              if(res.data.size<200){
                 this.$message.error("文件不存在,请联系管理员！");
                  this.progressShow=false
                  return false;
              }
              //blob返回的是一个 base64 格式的文件流
              let result = new Blob([res.data],{
                  //编译文件为xlsx类型。 具体可查看 blob 方法定义的类型 
                  type:"application/pdf"
              })

                 // let _fileName = res.data.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名，
                 

              //编译文件
            
              //编译文件完成后，进度条展示为100%100
              this.percentage =100;
              this.progressShow = false; // 关闭进度条显示层
               const url = window.URL.createObjectURL(new Blob([result], {type: "application/pdf"}))
               const a = document.createElement('a')
            a.target = '_blank'
            a.href = url
            a.click()

          })
      }
  }
}

</script>
<style lang='less' scoped>
</style>